<template>
	<view class="pageItem">
		<view class="head">
			<view class="h_con">
				<view class="msg">
					<view class="m_t1">
						<image class="img" src="/static/other/diamond_mini.png" mode="widthFix"></image>
						{{$t('diamond.current_diamond')}}
					</view>
					<view class="m_num">{{userInfo.score}}</view>
				</view>
				<view class="btn" @click="$r('/pages/diamond/redEnvelope')" >{{$t('diamond.integration_red_envelope')}}</view>
			</view>
			<view class="m_title">
				<view class="tit">{{$t('diamond.premium_exchange')}}</view>
				<view class="go" @click="$r('/pages/diamond/exchangeLog')" >{{$t('diamond.exchange_log')}}</view>
			</view>
		</view>
		<view class="main">
			<view class="goods_item">
				<block v-for="(item,index) in list" :key="'g_'+index">
					<view class="goods">
						<image class="g_img" :src="realUrl(item.logo)"></image>
						<view class="g_tit">{{item.title}}</view>
						<view class="g_msg">
							<view class="g_m_t">
								<label class="price">{{item.score}}</label>
								<image class="logo" src="/static/other/diamond_mini.png" mode="widthFix"></image>
							</view>
							<view class="g_m_btn" @click="to_goods_detail(item)" >{{$t('use.exchange')}}</view>
						</view>
					</view>
				</block>
				<block v-if="empty_show">
					<view style="width:100%;margin-top: 20vw;" v-if="list.length==0">
						<u-empty mode="data" iconSize="120" :text="$t('nodata')" ></u-empty>
					</view>
				</block>
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import { mapState} from 'vuex';
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				page : 1,
				empty_show : 0,
				loading : 0,
				load_type : 'more',
				list : []
			};
		},
		onReachBottom() {
			 this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.loadData();
		},
		methods:{
			to_goods_detail(item){
				uni.setStorageSync('cur_goods',JSON.stringify(item));
				this.$r('/pages/diamond/exchangeGoods?id='+item.id);
			},
			loadData(){
				if (this.load_type === 'loading' || this.load_type === 'no_more') {
					//防止重复加载
					return;
				}
				this.load_type = 'loading';
				let url = this.site_url + 'api/auth/goods/goods_list?page='+this.page;
					this.areq(url).then(res=>{
						this.empty_show = 1;
						this.loading = 1;
						   if(res.code == 1){
							   this.page++;
							   this.list = [...this.list,...res.data];
							   if(res.data.length == 10)
							   {
							   	this.load_type = 'more';
							   }else{
							   	this.load_type = 'no_more';
							   }
						   }else{
							   this.load_type = 'no_more';
						   }
					})	
			},
			
		}
	}
</script>

<style lang="scss">
.head {
	width: 100%;
	position: fixed;
	z-index: 98;
	padding: calc(var(--status-bar-height) + 4vw) 4% 3vw;
	background: $main_color2;
	.h_con {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		background: $main_color;
		padding: 4vw;
		border-radius: 3vw;
		.msg{
			flex: 1;
			.m_t1{
				width: 100%;
				font-size: 3.5vw;
				color: #fff;
				display: flex;
				align-items: center;
				.img{
					width: 4vw;
					margin-right: 1vw;
				}
			}
			.m_num{
				font-size: 6vw;
				font-weight: bold;
				color: #fff;
				padding-top: 2vw;
			}
		}
		.btn{
			padding: 1.8vw 3vw;
			background: #222;
			color: #fff;
			font-size: 3.5vw;
			border-radius: 1.5vw;
			margin-top: 3vw;
		}
	}
	.m_title{
		margin-top: 4vw;
		height: 5vw;
		display: flex;
		align-items: center;
		.tit{
			flex: 1;
			font-size: 4.5vw;
			color: $main_color5;
			font-weight: bold;
		}
		.go{
			font-size: 3.6vw;
			color: $main_color_s2;
			font-weight: bold;
		}
	}
}
.bg_item {
	@include bg_item(90vw);
}
.main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: calc(var(--status-bar-height) + 37vw) 4% 0;
	.goods_item{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.goods:not(:nth-child(2n+1)){
			margin-left: 2%;
		}
		.goods{
			width: 49%;
			padding: 0 0 2.5vw;
			border-radius: 3vw;
			overflow: hidden;
			background: $main_color2_s;
			margin-top: 2vw;
			.g_img{
				width: 100%;
				height: 45vw;
			}
			.g_tit{
				width: 94%;
				margin-top: 1vw;
				margin-left: 3%;
				@include text_over_style(2);
				font-size: 3.8vw;
				font-weight: bold;
				color: $main_color5;
			}
			.g_msg{
				width: 94%;
				margin-left: 3%;
				display: flex;
				align-items: flex-end;
				margin-top: 1vw;
				.g_m_t{
					flex: 1;
					.price{
						font-size: 4vw;
						font-weight: bold;
						color: $price_color;
					}
					.logo{
						width: 3.3vw;
						margin-left: 2vw;
					}
				}
				.g_m_btn{
					font-size: 3vw;
					color: #fff;
					background: linear-gradient(90deg, #FC5E3A 0%, #FD3348 100%);
					line-height: 6vw;
					border-radius: 2.8vw;
					padding: 0 3vw;
				}
			}
		}
	}
}
</style>
